﻿
@{
    Layout = null;
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UserRolesIndex</title>
    <link href="~/libs/layui-v2.9.21/layui-v2.9.21/layui/css/layui.css" rel="stylesheet" />
</head>
<body>

    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-input-block" id="roleCheckboxContainer">
                <!-- 多选框将在这里动态生成 -->
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left: 210px;">
                <button type="submit" class="layui-btn layui-btn-sm" onclick="allotRole()" lay-submit lay-filter="demo1">分配</button>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">取消</button>
            </div>
        </div>
    </form>

    <script src="~/libs/layui-v2.9.21/layui-v2.9.21/layui/layui.js"></script>
    <script src="~/libs/jquery/jquery.js"></script>

    <script>
        $(function() {
            getAllotRole();
            allotRoleDetail();
        });

        function getAllotRole() {
            $.ajax({
                url: '/Account/Select',
                type: 'get',
                dataType: 'json',
                async: false,
                success: function (res) {
                    console.log(res.data);
                    var container = $('#roleCheckboxContainer'); // 获取容器元素

                    // 清空现有的多选框
                    container.empty();

                    // 动态添加多选框
                    $.each(res.data, function (key, value) {
                        container.append('<input type="checkbox" name="roleName" title="' + value.roleName + '" lay-skin="primary" lay-filter="roleCheck">');
                    });

                    layui.use(['form'], function() {
                        var form = layui.form; // 获取 form 模块
                        form.render('checkbox'); // 重新渲染多选框
                    });
                }
            });
        }

        /// 查看当前用户已分配角色
        function allotRoleDetail() {
            console.log(@ViewBag.userId);
            $.ajax({
                url: '/UserRoles/GetUserInRoles?userId=' + @ViewBag.userId,
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                    var roleNames = res.data.map(role => role.roleName); // 假设返回的是对象数组，提取 roleName 属性
                    console.log(roleNames);
                    var container = $('#roleCheckboxContainer'); // 获取容器元素

                    // 遍历多选框，根据已分配角色勾选
                    container.find('input[type="checkbox"]').each(function (index, item) {
                        var roleName = $(item).attr('title');
                        if (roleNames.includes(roleName)) {
                            $(item).prop('checked', true);
                        } else {
                            $(item).prop('checked', false);
                        }
                    });

                    layui.use(['form'], function () {
                        var form = layui.form; // 获取 form 模块
                        form.render('checkbox'); // 重新渲染多选框
                    });
                }
            });
        }

        function allotRole() {
            var selectedRoles = [];
            $('input[name="roleName"]:checked').each(function() {
                selectedRoles.push($(this).attr('title'));
            });
            console.log(selectedRoles.toString())

            $.ajax({
                url: '/UserRoles/AllotRoles',
                type: 'post',
                data: { 
                   userId: @ViewBag.userId,
                   roleName: selectedRoles.toString(),
                },
                success: function (res) {
                    if (res>0) {
                        layer.msg('角色分配成功');
                        layer.msg(res.msg,{icon:1,time:1000,title:'OK了,老铁'},function(){

                        reset();
                    });
                    } else {
                        layer.msg('角色分配失败');
                        return;
                    }
                }
            });
        }


                //返回原页面
        function reset(){
            console.log("返回");
        //在当前iframe => 关闭当前iframe
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
        }


    </script>

</body>
</html>


